<template>
  <div>
    <van-cell-group>
      <van-cell title="搜索历史" class="hisCell">
        <van-icon slot="right-icon" name="delete" v-if="delBox" @click="garbage"/>
        <i v-else><span @click="delAll">全部删除</span>
        <span @click="garbage">  完成</span></i>
      </van-cell>
      <!------------- 渲染循环历史数据 ------------------>
      <van-cell class="historyCell"
        v-for="(item,index) in historyList"
        :key="index"
      >
      <span @click="$emit('search',item)" class="textBox">{{item}}</span>
        <van-icon name="close" @click="delOne(index)" v-show="show"/>
      </van-cell>
    </van-cell-group>
  </div>
</template>
           
<script>
import { SET_TOKEN } from "@/utils/storage";

export default {
  props: {
    historyList: {
      type: Array
    },
  },

  data() {
    return {
      delBox: true,
      show:false,
    };
  },
  methods: {
    //点击垃圾桶显示删除功能---------------------
    garbage() {
      this.delBox=! this.delBox
      this.show=!this.show
    },
    //删除全部历史记录
    delAll() {
      this.delBox = !this.delBox;
      // this.historyList = [];
      SET_TOKEN("historyList", "");
      //不能直接删除仓库的数据，不合法。要去historyList数据源头删除操作
      this.$emit("delAllList");
    },
    //删除单个历史记录
    delOne(i) {
      this.historyList.splice(i, 1);
      SET_TOKEN("historyList", this.historyList);
    },
    //点击历史记录的其中一项，可以跳转到搜索结果页面
    //就是吧关键词填充到input框，然后触发onsearch事件
    /* jumpRes() {
      this.$emit('search')
    } */
  }
};
</script>
<style scoped lang="less">
.historyCell {
   .textBox {
     display: inline-block;
     width: 655px;
   }
}
.hisCell {
  margin-top: 115px;
}

</style>